<form action='#' id='edit_calendar_event_form' style='padding: 5px; width: 400px'>
  <div class="event-details-content">
    <table class="formtable" style="width: 100%;" role="presentation">
      <tr>
        <td style="vertical-align: top;"><label for="calendar_event_title">{{#t "title"}}Title:{{/t}}</label></td>
        <td>
          {{#if lockedTitle}}
            {{title}}
          {{else}}
            <input id="calendar_event_title" name="calendar_event[title]" size="30" maxlength="255" style="width: 150px;" type="text" value="{{title}}"/>
          {{/if}}
        </td>
      </tr>
      <tr>
        <td style="vertical-align: top;"><label for="calendar_event_date">{{#t "date"}}Date:{{/t}}</label></td>
        <td>
          <div class='date_field_container'>
            <label class='screenreader-only' id='calendar_event_date_accessible_label'>
              {{#t}}Event Date:{{/t}}
              {{datepickerScreenreaderPrompt 'date'}}
            </label>
            <input id="calendar_event_date" type="text"
              value="{{fcMomentToDateString date "medium_with_weekday"}}"
              name="date" style="width: 100px;" class="date_field"
              aria-labelledby='calendar_event_date_accessible_label'
              data-tooltip title="{{accessibleDateFormat 'date'}}"/>
          </div>
        </td>
      </tr>
      <tr>
        <td style="vertical-align: top;"><label for="calendar_event_start_time">{{#t "from"}}From:{{/t}}</label></td>
        <td>
          <div style="float: left;">
            <div class='date_field_container'>
              <label class='screenreader-only' id='calendar_event_start_time_accessible_label'>
                {{#t}}Event Start Time{{/t}}
                {{datepickerScreenreaderPrompt 'time'}}
              </label>
              <input id="calendar_event_start_time" type="text"
                name="start_time" style="width: 60px;"
                class="time_field start_time"
                aria-labelledby='calendar_event_start_time_accessible_label'
                data-tooltip title="{{accessibleDateFormat 'time'}}"/>
            </div>
          </div>
          <div style="float: left; margin: 5px"><label for="calendar_event_end_time">{{#t "timespan_separator"}} to {{/t}}</label></div>
          <div style="float: left;">
            <div class='date_field_container'>
              <label class='screenreader-only' id='calendar_event_end_time_accessible_label'>
                {{#t}}Event End Time{{/t}}
                {{datepickerScreenreaderPrompt 'time'}}
              </label>
              <input id="calendar_event_end_time" type="text"
                name="end_time" style="width: 60px;"
                class="time_field end_time"
                aria-labelledby='calendar_event_end_time_accessible_label'
                data-tooltip title="{{accessibleDateFormat 'time'}}"/>
            </div>
          </div>
          <div class="clear"></div>
        </td>
      </tr>
      <tr>
        <td style="vertical-align: top;"><label for="calendar_event_location_name">{{#t "location"}}Location:{{/t}}</label></td>
        <td><input id="calendar_event_location_name" name="location_name" size="30" maxlength="255" style="width: 185px;" type="text" value="{{location_name}}"/></td>
      </tr>
      <tr class="context_select">
        <td><label for="calendar_event_context">{{#t "calendar"}}Calendar:{{/t}}</td>
        <td>
          <select id="calendar_event_context" class="context_id" name="calendar_event[context_code]">
            {{#each contexts}}
              {{#if can_create_calendar_events}}
                <option value="{{asset_string}}">{{name}}</option>
              {{/if}}
            {{/each}}
          </select>
        </td>
      </tr>
    </table>
  </div>
  <div class="popover-links-holder event-details-footer pull-right">
    <a href="#" class="event_button btn btn-secondary more_options_link">{{#t "links.more_options"}}More Options{{/t}}</a>
    <button type="submit" class="event_button btn btn-primary">{{#t "#buttons.submit"}}Submit{{/t}}</button>
  </div>
</form>
